<template>
    <el-tooltip :content="props.tooltip" placement="right">
        <template #default>
            <RouterLink :to="props.to" class="my-router-link" active-class="active" custom>
                <div class="nav-button">
                    <slot></slot>
                </div>
            </RouterLink>
        </template>
    </el-tooltip>
</template>

<script setup lang="ts">
const props = defineProps<{
    to: string
    tooltip: string
}>()
</script>

<style lang="scss" scoped>
@use '/src/assets/scss/color.scss' as *;

.my-router-link {
    text-decoration-color: none;
    text-decoration: none;
    cursor: pointer;
    color: white;

    &.active {
        color: $c-orange-4;
    }
}

.nav-button {
    // padding: 5px;

    height: 40px;
    width: 40px;

    border-radius: 4px;

    display: flex;

    // color: $c-blue-0;
    // color:white;
    align-items: center;
    background-color: $c-gray-8;
    justify-content: center;
    text-decoration-color: none;

    &:hover {
        background-color: $c-gray-7;
    }

    &:active {
        // color: $c-blue-0;
        text-decoration-color: none;
        text-decoration: none;
    }
}
</style>
